import React, { PureComponent } from 'react';
import { ListItem, ListInfo, LoadMore } from '../style';
import { connect } from 'react-redux';
import { actionCreators } from '../store';
import { Link } from 'react-router-dom';

class List extends PureComponent {
    render() {
        const { articlList, listPage } = this.props
        return (
            <div>
                {
                    articlList.map((item, index) => {
                        return (
                            <Link to={'/detail/'+item.get('id')} key={index}>
                                <ListItem>
                                    <img alt=""
                                        src={item.get('imgUrl')}
                                        className="pic"></img>
                                    <ListInfo>
                                        <h3 className="title">{item.get('title')}</h3>
                                        <p className="desc">{item.get('desc')}</p>
                                    </ListInfo>
                                </ListItem>
                            </Link>
                        )
                    })
                }
                <LoadMore onClick={() => {
                    this.props.handleMore(listPage)
                }}>加载更多</LoadMore>
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        articlList: state.get('home').get('articlList'),
        listPage: state.get('home').get('listPage')
    }
}
// 点击“加载更多”加载更多文章内容
const mapDispatchToProps = (dispatch) => {
    return {
        handleMore(page) {
            const action = actionCreators.getMoreListAction(page + 1)
            dispatch(action);
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(List);